<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="wrapper">
        <header>
            <div class="nav">
                <div class="nav-top">
                    <div class="container">
                        <div class="nav-header clearfix">
                            <ul class="sub">
                                <li><a href=""><i class="fa fa-home"></i>首页</a></li>
                                <li class="li-b">
                                    <a href=""><i class="fa fa-cogs"></i>分享</a>
                                    <div class="fx">
                                        <ul>
                                            <li><a href="">我的作业</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="li-a">
                                    <a href=""><i class="fa fa-envelope"></i>关于我</a>
                                    <div class="gyw">
                                        <ul>
                                            <li><a href="">在线留言</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="li-c">
                                    <a href=""><i class="fa fa-edit"></i>记录</a>
                                    <div class="jl">
                                        <ul>
                                            <li><a href="">生活随记</a></li>
                                            <li><a href="">留个地标</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href=""><i class="fa fa-download"></i>友情链接</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="nav-bottom">
                    <div class="container">
                        <a href="">
                            <h2>如果生活不如你所想</h2>
                            <br>
                            <span>我希望你有勇气重新出发</span>
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <div class="container">
                <div class="main-top">
                    <div class="top-a">
                        <h2>生活的点点滴滴</h2>
                    </div>
                    <div class="top-b">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/a.PNG" alt="">
                                        <div class="item-caption">
                                            <span>2019-9-9</span>
                                        </div>
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>TaoBao</h3></a>
                                        <p>淘宝</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/b.PNG" alt="">
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>Givenchy</h3></a>
                                        <p>纪梵希</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/c.PNG" alt="">
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>Tianya Mingyue Knife</h3></a>
                                        <p>天涯明月刀</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/d.PNG" alt="">
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>Haier</h3></a>
                                        <p>海尔</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/e.PNG" alt="">
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>millet</h3></a>
                                        <p>小米</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="t-center">
                                        <img src="img/f.PNG" alt="">
                                    </div>
                                    <div class="item-info">
                                        <a href="#"><h3>Vico power</h3></a>
                                        <p>维科动力</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-bottom">
                <div class="container">
                    <div class="wz">
                        <h2>欢迎浏览我的个人博客</h2>
                        <h4>遇见困难怎么办？</h4>
                        <p>遇到再大困难的时候，不要惊慌，千万要学会冷静;不要去想着求别人，以前有家人帮你，现在需要你一个人面对挑战，从绝望中寻找希望，人生终将辉煌。</p>
                    </div>
                </div>
            </div>
            <div class="article clearfix">
                <div class="container clearfix">
                    <div class="box_1 clearfix">
                        <div class="blogs clearfix">
                            <ul>
                                <li style="display: inline-block;">
                                    <a href="" class="tu"><img src="img/aa.jpg" alt=""></a>
                                    <h3>
                                        <a href="">关于响应式Web设计技巧以及入门</a>
                                    </h3>
                                    <p>html5和css3流行至今，我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习，
                                        浅显的理解就是根据屏幕分辨率的大小，网站布局、图片、文字大小等...</p>
                                </li>
                                <li class="autor">
                                    <span class="pic">
                                        <a href="">HTML5+CSS3</a>
                                    </span>
                                    <span class="time">2019-9-9</span>
                                    <span class="less">浏览 <a href="">(12)</a></span>
                                    <span class="end"><a href="">阅读全文</a></span>
                                </li>
                            </ul>
                        </div>
                        <div class="blogs clearfix">
                            <ul>
                                <li style="display: inline-block;">
                                    <a href="" class="tu"><img src="img/bb.jpg" alt=""></a>
                                    <h3>
                                        <a href="">三步实现滚动条触动css动画效果</a>
                                    </h3>
                                    <p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js
                                        用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
                                </li>
                                <li class="autor">
                                    <span class="pic">
                                        <a href="">HTML5+CSS3</a>
                                    </span>
                                    <span class="time">2019-9-9</span>
                                    <span class="less">浏览 <a href="">(3)</a></span>
                                    <span class="end"><a href="">阅读全文</a></span>
                                </li>
                            </ul>
                        </div>
                        <div class="blogs clearfix">
                            <ul>
                                <li style="display: inline-block;">
                                    <a href="" class="tu"><img src="img/cc.png" alt=""></a>
                                    <h3>
                                        <a href="">6条网页设计配色原则,让你秒变配色高手</a>
                                    </h3>
                                    <p>网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一
                                        个要学习web前端设计的新手来说,这都是一个重要的学习过程.在本教程中我们将与你分享...</p>
                                </li>
                                <li class="autor">
                                    <span class="pic">
                                        <a href="">HTML5+CSS3</a>
                                    </span>
                                    <span class="time">2019-9-9</span>
                                    <span class="less">浏览 <a href="">(12)</a></span>
                                    <span class="end"><a href="">阅读全文</a></span>
                                </li>
                            </ul>
                        </div>
                        <div class="blogs clearfix">
                            <ul>
                                <li style="display: inline-block;">
                                    <a href="" class="tu"><img src="img/dd.jpg" alt=""></a>
                                    <h3>
                                        <a href="">别让这些闹心的套路，毁了你的网页设计</a>
                                    </h3>
                                    <p>网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，
                                        但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题。...</p>
                                </li>
                                <li class="autor">
                                    <span class="pic">
                                        <a href="">HTML5+CSS3</a>
                                    </span>
                                    <span class="time">2019-9-9</span>
                                    <span class="less">浏览 <a href="">(2)</a></span>
                                    <span class="end"><a href="">阅读全文</a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="box_2 clearfix">
                        <div class="ti">
                            <div class="ti-a">
                                <img src="img/tx.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>



</body>
</html>